<template>
  <div class="left">
    <!-- 上部 -->
    <div class="left_header">
      <!--  -->
      <div class="title">最新上线模型</div>
      <div class="title_table">
        <el-table
          :data="topData"
          max-height="200"
          style="width: 100%"
          ref="table1"
        >
          <el-table-column
            prop="ranking"
            label="排名"
            width="50"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="上线时间"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="names"
            label="模型名称"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column prop="arithmetic" label="算法名称">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 中间 -->
    <div class="left_middle">
      <!--  -->
      <div class="title">模型排名</div>
      <div class="title_table">
        <el-table
          :data="middleData"
          max-height="200"
          style="width: 100%"
          ref="table2"
        >
          <el-table-column prop="names" label="模型名称"> </el-table-column>
          <el-table-column
            prop="userNum"
            label="目标用户"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="coverage"
            label="覆盖率"
            align="center"
            header-align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 下边 -->
    <div class="left_bottom">
      <!--  -->
      <div class="title">意图识别算法</div>
      <div class="title_table">
        <el-table
          :data="bottomData"
          max-height="200"
          style="width: 100%"
          ref="table3"
        >
          <el-table-column prop="arithmetic" label="算法名称"></el-table-column>
          <el-table-column
            prop="employ"
            label="应用"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            prop="ranking"
            label="应用排名"
            align="center"
            header-align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "left",
  data() {
    return {
      topData: [
        {
          ranking: "1",
          time: "2022-05-20",
          names: "智能家居",
          arithmetic: "GRU算法",
        },
        {
          ranking: "2",
          time: "2022-05-20",
          names: "智能门锁",
          arithmetic: "SEQ算法",
        },
        {
          ranking: "3",
          time: "2022-05-20",
          names: "全光组网",
          arithmetic: "深度学习算法",
        },
        {
          ranking: "4",
          time: "2022-05-20",
          names: "套餐低签",
          arithmetic: "FASTTEST算法",
        },
        {
          ranking: "5",
          time: "2022-05-20",
          names: "天翼看家",
          arithmetic: "深度网络算法",
        },
        {
          ranking: "6",
          time: "2022-05-20",
          names: "携号转出",
          arithmetic: "GRU算法",
        },
        {
          ranking: "7",
          time: "2022-05-20",
          names: "携号转出",
          arithmetic: "SEQ算法",
        },
        {
          ranking: "8",
          time: "2022-05-20",
          names: "移机搬家",
          arithmetic: "GRU算法",
        },
        {
          ranking: "9",
          time: "2022-05-20",
          names: "智能门禁",
          arithmetic: "深度网络算法",
        },
      ],
      middleData: [
        { names: "移机搬家", userNum: "5953", coverage: "80%" },
        { names: "套餐低签", userNum: "2551", coverage: "79%" },
        { names: "携号转出", userNum: "2316", coverage: "75%" },
        { names: "智能门锁", userNum: "14", coverage: "70%" },
        { names: "智能门禁", userNum: "14", coverage: "70%" },
        { names: "天翼看家", userNum: "10", coverage: "66%" },
      ],
      bottomData: [
        { arithmetic: "GRU算法", employ: "130", ranking: "1" },
        { arithmetic: "SEQ算法", employ: "115", ranking: "2" },
        { arithmetic: "FASTTEST算法", employ: "84", ranking: "3" },
        { arithmetic: "深度学习算法", employ: "48", ranking: "4" },
        { arithmetic: "深度网络算法", employ: "15", ranking: "5" },
      ],
    };
  },
  created() {},
  mounted() {
    this.infinitScroll("table1");
    this.infinitScroll("table2");
    this.infinitScroll("table3");
  },
  activated() {},
  methods: {
    infinitScroll(ref) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[ref];
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      let t;
      function start() {
        // console.log(2);
        // 数据少于表格高度停止滚动
        // if (divData.clientHeight >= divData.scrollHeight) {
        //   return;
        // }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // console.log(1);
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      }
      start();
    },
  },
};
</script>
<style scoped lang="scss">
.left {
  /* width: 500px; */
  height: 100%;
  // min-width: 500px;
  // max-width: 800px;
  width: 100%;
  border: none !important;
}
.left_header {
  // min-width: 500px;
  // max-width: 800px;
  height: 28%;
  width: 100%;
  background-image: url("@/assets/right1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  z-index: 10000;
  padding-top: 1.625rem;
  overflow: hidden;
}
.title {
  width: 10rem;
  /* height: 34px; */
  line-height: 1.5rem;
  /* text-align: center; */
  padding: 0.2rem 0 0.2rem 1.3125rem;
  /* background: #ccc; */
  font-size: 1.25rem;
  position: relative;
  margin-left: 1.5625rem;
  background: linear-gradient(
    to right,
    rgba(2, 173, 245, 0.6),
    rgba(2, 173, 245, 0.1)
  );
}
.title::before {
  content: "";
  width: 0.3125rem;
  height: 1.9rem;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(2, 173, 245);
}
.title_table {
  margin-left: 1.5625rem;
  font-size: 0.875rem;
  width: 30rem;
}
::v-deep .el-table thead {
  color: rgb(51, 155, 200);
}

// ::v-deep .left_header {
//   .el-table__body-wrapper {
//     background-color: #fff;
//   }
// }
// 中间的
.left_middle {
  margin-top: 1.25rem;
  margin-left: 1.35rem;
  min-width: 500px;
  // max-width: 800px;
  width: 100%;
  height: 28%;
  background-image: url("@/assets/right2.png");
  background-repeat: no-repeat;
  background-size: 91% 100%;
  color: white;
  z-index: 10000;
  padding-top: 1.625rem;
  overflow: hidden;
}
// 下面的
.left_bottom {
  margin-top: 1.25rem;
  margin-left: 1.35rem;
  // min-width: 500px;
  // max-width: 800px;
  // width: 100%;
  height: 36%;
  background-image: url("@/assets/right3.png");
  background-repeat: no-repeat;
  background-size: 100% 85%;
  color: white;
  z-index: 10000;
  padding-top: 1.625rem;
  overflow: hidden;
}

// 表格
::v-deep.el-table,
.el-table__expanded-cell {
  background: rgba(0, 133, 255, 0);
  color: #fff;
  font-size: 0.875rem;
}
::v-deep .el-table_5_column_5 {
  background: transparent;
}
::v-deep .el-table__row {
  background: transparent;
}
.el-table {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  border-bottom: none !important;
  ::v-deep tbody tr:hover > td {
    background-color: rgba(16, 48, 78, 0) !important;
  }
  ::v-deep thead tr,
  ::v-deep thead .el-table__cell {
    background-color: transparent;
    color: #fff;
  }
  ::v-deep .el-button--text {
    color: rgb(8, 216, 249);
  }
}
::v-deep.el-table tr {
  background: transparent;
}
::v-deep .el-table_2_column_4 {
  background: transparent;
}
.el-table th.el-table__cell {
  background-color: transparent;
}
::v-deep .btn-prev,
::v-deep .btn-next {
  background: transparent !important;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
::v-deep .has-gutter .el-table td.el-table__cell,
::v-deep .has-gutter .el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
::v-deep .el-table__column-resize-proxy {
  border-left: none;
}
::v-deep .el-table::before {
  background-color: transparent;
}
::v-deep .el-table .el-table__cell {
  padding: 0.5rem 0;
}
// 修改rem布局

::v-deep el-table {
}
::v-deep .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 1.4375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
</style>